<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
        <view class="goods-comment" v-if="data.__is_comment">
            <view class="goods-comment-item flex-col" v-for="(item,ckey) in data.comment" :key="item.id">
                <view class="goods-comment-user flex-grow-0 flex-row flex-y-center">
                    <view class="comment-user-pic flex-grow-0">
                        <image :src="item.avatar_url"></image>
                    </view>
                    <view class="comment-user-name flex-grow-0">
                        {{item.nickname}}
                    </view>
                </view>
                <view class="goods-comment-conent flex-grow-1">
                    {{item.content}}
                </view>
                <view class="goods-comment-ginfo">
                    {{item.addtime}}
                    <block v-for="(attr,index) in item.attr" :key="index">
                        {{attr.attr_group_name}}:{{attr.attr_name}}
                    </block>
                </view>
                <view class="goods-comment-piclist">
                    <view class="comment-pic-shell" v-for="(pic,index) in item.pic_list" :key="index">
                        <image @tap="bigToImage" :data-index="ckey" :data-url="pic" mode="aspectFit" :src="pic" style="width:160upx;height:160upx"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = !1, e = !1, o = 2;
	export default {
		data() {
			return {
				data: {},
			};
		},
		onLoad: function(a) {myVue = this;
        myVue.getApp.page.onLoad(this, a), t = !1, e = !1, o = 2;
        var n = this;
        n.setData({
            gid: a.id
        }), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.comment,
            data: {
                gid: a.id
            },
            success: function(t) {
                n.getApp.core.hideLoading(), 1 == t.code && n.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && n.getApp.core.navigateBack();
                    }
                }), 0 == t.code && (0 == t.data.comment.length && n.getApp.core.showModal({
                    title: "提示",
                    content: "暂无评价",
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && n.getApp.core.navigateBack();
                    }
                }), n.setData({
                    comment: t.data.comment
                })), n.setData({
                    show_no_data_tip: 0 == n.data.comment.length
                });
            }
        });
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(a) {
        myVue.getApp.page.onReachBottom(this);
        var n = this;
        e || t || (e = !0, myVue.getApp.request({
            url: myVue.getApp.api.group.comment,
            data: {
                gid: n.data.gid,
                page: o
            },
            success: function(e) {
                if (0 == e.code) {
                    var a = n.data.comment.concat(e.data.comment);
                    n.setData({
                        comment: a
                    }), 0 == e.data.comment.length && (t = !0);
                }
                o++;
            },
            complete: function() {
                e = !1;
            }
        }));
    },
		methods: {
			bigToImage: function(t) {
        var e = this.data.comment[t.target.dataset.index].pic_list;
        myVue.getApp.core.previewImage({
            current: t.target.dataset.url,
            urls: e
        });
    }
		},
	}
</script>

<style scoped>
page {
}

.goods-comment {
    padding: 0 24upx;
    background-color: #ffffff;
}

.goods-comment-title {
    height: 80upx;
    font-size: 9pt;
    color: #919191;
}

.comment-user-pic image {
    width: 66upx;
    height: 66upx;
    border-radius: 33upx;
    margin-right: 20upx;
}

.goods-comment-item {
    border-top: 1upx solid #e2e2e2;
    padding-bottom: 36upx;
}

.goods-comment-user {
    margin-top: 32upx;
}

.comment-user-name {
    font-size: 11pt;
    color: #353535;
}

.goods-comment-conent {
    font-size: 10pt;
    color: #353535;
    margin: 20upx 0;
    line-height: 1.3;
}

.goods-comment-ginfo {
    font-size: 9pt;
    color: #919191;
    margin-bottom: 16upx;
}

.comment-pic-shell {
    width: 160upx;
    height: 160upx;
    border-radius: 4upx;
    margin-right: 16upx;
    overflow: hidden;
    display: inline-block;
}
</style>
